<template>
  <div id="center">

    <div class="top">
      <nav class="nav_wrap">
        <div class="nav_item" ></div>

      </nav>
      <div class="close">
        <i class="mdi mdi-close-box" @click="handleClose"></i>
      </div>
    </div>
    <div class="scroll-wrapper main">
      <transition-group tag="div" class="row scroll-content" name="list">
         <div class="col page_item" v-for="item in pagesData" :key="item.webKey">
          <div  class="page" :title="item.webName">
            <div class="left">
              <img
                  :src="
                  item.webIconUrl == ''
                    ? 'https://lijieblog.top/favicon.ico'
                    : 'https://lijieblog.top/favicon.ico'"
              />
              <div class="web-name">{{item.webName}}</div>
            </div>
            <div class="right">
              <div  class="gg_content">
                <a  v-for="news in item.list" :key="news.rank" target="_blank"
                    :href="news.titleUrl">
                  <div class="gg_text">{{news.title}}</div>
                </a>
              </div >
            </div>
          </div>
        </div>
      </transition-group>
    </div>

    <div class="footer" v-if="$config.FOOTER_INFO"></div>

  </div>
</template>

<script>
// import BScroll from "better-scroll";
export default {
  data() {
    return {
      sortData: [],
      sortIndex: 0,
      pagesData: [],
      scroller: null
    };
  },
  computed: {
    // parentCenterShow() {
    //   // 与父元素耦合
    //   return this.$parent.centerShow;
    // }
  },
  watch: {
    // parentCenterShow(val) {
    //   if (val) {
    //     this.scrollerResize();
    //   }
    // }
  },
  methods: {

    getPages() {
      return new Promise((resolve, reject) => {
          this.axios
            .get("/LjPage/hot/list")
            .then(res => {
              this.pagesData = res.data.data;
              resolve();
            })
            .catch(err => {
              console.log(err);
              reject(err);
            });
      });
    },
    getSort() {
      return new Promise((resolve, reject) => {
        if (this.$config.SERVE) {
          this.axios
            .get("/getSort")
            .then(res => {
              if (res.data.code == 1) {
                this.sortData = res.data.data;
                resolve();
              } else {
                reject();
              }
            })
            .catch(err => {
              console.log(err);
              reject(err);
            });
        } else {
          this.sortData = this.$config.SORT_DATA;
          resolve();
        }
      });
    },
    changeSortIndex(index) {
      this.sortIndex = index;
      this.getPages();
    },
    handleClose() {
      this.$emit("hide");
    },
    // _getStyleNumber(el, property) {
    //   return parseInt(window.getComputedStyle(el).getPropertyValue(property));
    // },
    // scrollerResize() {
    //   if (!this.parentCenterShow) {
    //     return;
    //   }
    //   let drawer = document.querySelector("#center");
    //   let drawerHeight =
    //     this._getStyleNumber(drawer, "height") -
    //     this._getStyleNumber(drawer, "padding-top") -
    //     this._getStyleNumber(drawer, "padding-bottom");
    //
    //   let top = document.querySelector("#center .top");
    //   let topHeight = this._getStyleNumber(top, "height");
    //
    //   let footer = document.querySelector("#center .footer");
    //   let footerHeight = this._getStyleNumber(footer, "height");
    //
    //   let scrollerWrapper = document.querySelector(".scroll-wrapper");
    //   scrollerWrapper.style.height = `${drawerHeight -
    //     footerHeight -
    //     topHeight}px`;
    //
    //   if (this.scroller) {
    //     this.scroller.refresh();
    //   } else {
    //     let wrapper = document.querySelector(".scroll-wrapper");
    //     this.scroller = new BScroll(wrapper, {
    //       click: true
    //     });
    //   }
    // }
  },
  mounted() {
    this.getSort()
      .then(() => {
        return this.getPages();
      })
      .then(() => {
        // 数据已获取完成 Better Scroll 进行初始化
        // this.scrollerResize();
      });
    // window.addEventListener("resize", this.scrollerResize);
  }
};
</script>

<style lang="scss" scoped>
a{
  text-decoration: none;
}
#center {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  padding: 1rem;
  background-color: rgba(241, 241, 241, 0.81);
  color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  .top {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0 0.5rem;
    .nav_wrap {
      display: flex;
      .nav_item {
        margin-right: 15px;
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 2px solid rgba(0, 0, 0, 0);
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
      .active {
        border-bottom: 2px solid rgba(0, 0, 0, 1);
        color: rgba(0, 0, 0, 1);
      }
    }
    .close {
      font-size: 1.2rem;
      position: relative;
      float: right;
      top: -5px;
      cursor: pointer;
    }
  }
  .scroll-wrapper.main {
    height: 100%;
    overflow: auto;
    margin: 0 auto;

    .scroll-content {
      margin: 0;
      .page_item {
        height: 300px;
        //display: flex;
        .page {
          background-color: rgba(255, 255, 255, 0.56);
          padding: 1rem;
          overflow: auto;
          box-sizing: border-box;
          //border-radius: 0.5rem;
          display: flex;
          align-items: center;
          height: 100%;
          cursor: pointer;
          text-decoration: none;
          //&:hover {
          //  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          //}

          .left {
            width: 10%;
            img {
              width: 50%;
              height: 50%;
            }
            .web-name {
              color: #000000;
              font-size: 15px;
              font-weight: bold;
            }
          }
          .right {
            overflow: auto;
            box-sizing: border-box;
            height: 100%;
            width: 90%;
            margin-left: 20px;
            display: flex;
            align-items: center;
            cursor: pointer;
            text-decoration: none;
            .gg_content {
              height: 100%;
              .gg_text {
                margin: 8px;
                font-weight: 540;
                color: #444;
                font-size: 14px;
                font-family: "Microsoft YaHei",serif;
              }
              .gg_text:hover{
                color: #070707;
                font-size: 14px;
              }
            }
            .title {
              font-size: 1rem;
              color: rgba(0, 0, 0, 0.8);
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .subtitle {
              margin-top: 0.5rem;
              font-size: 0.8rem;
              line-height: 1.5;
              color: rgba(0, 0, 0, 0.6);
              overflow: auto;
              text-overflow: ellipsis;
            }
          }
          // 滚动条宽度
          .right::-webkit-scrollbar {
            width: 8px;
          }
          // 滚动条轨道
          .right::-webkit-scrollbar-track {
            background: rgb(239, 239, 239);
            border-radius: 2px;
          }
          // 小滑块
          .right::-webkit-scrollbar-thumb {
            background: #767676;
            border-radius: 10px;
          }
          .right::-webkit-scrollbar-thumb:hover {
            background: #181818;
          }
        }
      }
    }
  }
  // 滚动条宽度
  .scroll-wrapper.main::-webkit-scrollbar {
    width: 6px;
  }
  // 滚动条轨道
  .scroll-wrapper.main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  // 小滑块
  .scroll-wrapper.main::-webkit-scrollbar-thumb {
    background: #767676;
    border-radius: 10px;
  }
  .scroll-wrapper.main::-webkit-scrollbar-thumb:hover {
    background: #181818;
  }
  .row {
    margin: 0 -0.5rem;
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    padding: 0.5rem;
    box-sizing: border-box;
    width: 33%;
    transition: all 1s;
  }
  .footer {
    font-size: 12px;
    text-align: right;
    color: #303030;
    margin-top: 10px;
    .mdi {
      font-size: 28px;
      position: relative;
      top: 3px;
      font-weight: bold;
    }
    a {
      // color: #2196F3;
      color: #303030;
      text-decoration: none;
      font-weight: bold;
    }
  }
}

@media screen and (max-width: 900px) {
  #center {
    .main {
      .page {
        align-items: inherit;
        padding: 0.8rem;
        .left {
          width: 70%;
        }
      }
    }
    .col {
      width: 50%;
    }
  }
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.list-leave-active {
  position: absolute;
}
</style>
